<!--
 * @Author: Cenven
 * @Date: 2021-06-29 11:43:33
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-07-01 15:06:44
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="menu_chapter_component">
    <div class="title">章节练习</div>
    <div class="chapter_list">
      <div class="chapter_item" v-for="(item, index) in chapterTree" :key="item.id">
        <div class="chapter_one_name">
          <p>{{item.chapterName}}</p>
          <Icon
            :type="
              chapterFatherIndex == index
                ? 'ios-arrow-down'
                : 'ios-arrow-forward'
            "
            size="24"
            style="margin-right:20px;cursor: pointer;"
            @click="chapterHandle(index)"
          />
        </div>
        <ul v-if="index == chapterFatherIndex">
          <li class="chapter_two_name" v-for="(twoChapter,twoIndex) in item.node" :key="twoChapter.id">
            <p>{{twoChapter.chapterName}}</p>
            <span>{{twoChapter.doneQuestionNum}}/{{twoChapter.testQuestionNum}}</span>
            <div class="chapter_test_btn" @click="toPath(twoChapter)">答题</div>
          </li>
          <div class="empty" v-if="item.node.length == 0">
            <Icon type="ios-list-box" size="70" />
            <p>暂无练习章节哟</p>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getQuestionBankChapterList } from "~/api/v2-question-bank/question-bank.js";
export default {
  name: "menu_chapter_component",
  props: ["questionId"],
  components: {},
  data() {
    return {
      chapterFatherIndex: null,
      chapterTree:[],
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      question_record_list(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    })
  },
  watch: {},
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
    ]),
    /* 获取章节树 */
    async getChapterTree() {
      this.SET_IS_LOADING(true);
      let params = {
        questionGroupId: this.questionId,
        userId: this.user_info.id
      };
      let result = await getQuestionBankChapterList(params);
      console.log("result:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        this.chapterTree = data;
      } else {
        this.$Message.error("获取失败!请稍后重试");
      }
      this.SET_IS_LOADING(false);
    },
    chapterHandle(i) {
      if (this.chapterFatherIndex == i) {
        this.chapterFatherIndex = null;
      } else {
        this.chapterFatherIndex = i;
      }
    },
    toPath(detail) {
      if (detail && detail.id) {
        this.$router.push({
          path:
            "/question-test?id=" +
            this.questionId +
            "&type=0&chapterId=" +
            detail.id
        });
      }
    }
  },
  created() {
    console.log(this.questionId);
    this.getChapterTree();
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.menu_chapter_component {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 0px 20px 46px;
  background: #ffffff;

  .title {
    font-size: 18px;
    font-weight: bold;
    color: #5a5e66;
    border-bottom: 1px solid #e9edf5;
    line-height: 50px;
  }
  .chapter_list {
    .chapter_item {
      border-bottom: 1px solid #e9edf5;
      &:last-child {
        border-bottom: none;
      }
      .chapter_one_name {
        width: 100%;
        height: 55px;
        font-size: 16px;
        font-weight: bold;
        color: #5a5e66;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          width: 800px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      ul > li {
        box-sizing: border-box;
        padding-left: 56px;
        width: 100%;
        height: 55px;
        height: 40px;
        font-size: 14px;
        font-weight: bold;
        color: #878d99;
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          width: 500px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .chapter_test_btn {
          width: 60px;
          height: 28px;
          border-radius: 4px;
          border: solid 1px var(--theme-color);
          line-height: 28px;
          text-align: center;
          font-size: 14px;
          color: var(--theme-color);
          margin-right: 52px;
          cursor: pointer;
        }
      }
      .empty{
        padding: 30px;
        box-sizing: border-box;
        background: #ffffff;
        text-align: center;
        font-size: 16px;
      }
    }
  }
}
</style>
